<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>
        .search-btn {
            margin-left: 20px;
        }

        .tableBar {
            justify-content: flex-start !important;
        }

        .info-box {
            margin: -15px -44px 20px;
        }

        .info-box .item-box {
            display: flex;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            text-align: left;
            margin-bottom: 14px;
        }

        .info-box .item-box:last-child {
            margin-bottom: 0;
        }

        .info-box .item-box .label {
            width: 96px;
        }

        .info-box .item-box .des {
            flex: 1;
            color: #333333;
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="diagram" v-loading="loading">
    <!-- 搜索项 -->
    <div class="tableBar">
        <el-date-picker v-model="orderTime"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        placeholder="选择日期"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        style="width: 400px;margin-left: 20px;"
        ></el-date-picker>
        <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <div id="container" style="min-width: 400px; min-height: 600px; margin: 0 auto"></div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/diagram.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/exporting.js"></script>
<script src="../../js/drilldown.js"></script>
<script src="../../js/highcharts-zh_CN.js"></script>

<script>
    new Vue({
        el: "#diagram",
        data() {
            return {
                orderTime: '',
                beginTime: '',
                endTime: '',
                drilldown: {
                    series: []
                },
                series: [{
                    data: []
                }],
                total: 0
            }
        },
        async mounted() {
            await this.getSetmealList();
            await this.initDiagram();
        },
        watch: {
            orderTime(val) {
                if (val && val.length >= 2) {
                    this.beginTime = val[0]
                    this.endTime = val[1]
                } else {
                    this.beginTime = ''
                    this.endTime = ''
                }
            }
        },
        methods: {
            async search() {
                searchSetmealApi({
                    beginTime: this.beginTime || undefined,
                    endTime: this.endTime || undefined
                }).then(res => {
                    if (res.code === 1) {
                        this.series[0].data = res.data;
                        for (let i = 0; i < res.data.length; i++) {
                            this.total += res.data[i].y
                        }
                        for (let i = 0; i < res.data.length; i++) {
                            this.drilldown.series.push(res.data[i].drilldownSeries)
                        }
                        this.initDiagram();
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            async getSetmealList() {
                const res = await getSetmealListApi();
                if (res.code === 1) {
                    this.series[0].data = res.data;
                    for (let i = 0; i < res.data.length; i++) {
                        this.total += res.data[i].y
                    }
                    for (let i = 0; i < res.data.length; i++) {
                        this.drilldown.series.push(res.data[i].drilldownSeries)
                    }
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },

            // 获取当前年月份
            doHandleDate() {
                var myDate = new Date();
                var tYear = myDate.getFullYear();
                var tMonth = myDate.getMonth();

                var m = tMonth + 1;
                if (m.toString().length === 1) {
                    m = "0" + m;
                }
                return tYear + '-' + m;
            },

            initDiagram() {
                var setmealData = this.series[0].data;
                var drilldownData = this.drilldown.series;
                var totalData = this.total;
                var beginTime = this.beginTime;
                var endTime = this.endTime;
                var showTime;
                if (beginTime === '' || endTime === '') {
                    showTime = this.doHandleDate();
                } else {
                    showTime = beginTime + ' 到 ' + endTime;
                }
                new Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: showTime + ' 各分类及套餐销量'
                    },
                    subtitle: {
                        text: '总销量：' + totalData
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '套餐销量'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> <b>of</b> <b>' + totalData + '</b><br/>'
                    },
                    series: [{
                        name: '套餐分类',
                        colorByPoint: true,
                        // 动态获取分类销量数据
                        data: setmealData
                    }],
                    drilldown: {
                        series: drilldownData
                    },

                });
            }
        },
    })

</script>
</html>